<!DOCTYPE html>
<html>
<head>
<title>WwWwWwWwWw</title>
<!-- for-mobile-apps -->
	<meta name="description" content="my website"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="个人网站 王梓轩 王梓轩的个人网站 黑龙江大学 "/>

<!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" media="screen"/>
<!-- js -->
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
        function hideURLbar(){ window.scrollTo(0,1); }
	</script>
<!-- //js -->
	<!-- start-smoth-scrolling -->
		<script type="text/javascript" src="js/move-top.js"></script>
		<script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
		</script>
	<!-- start-smoth-scrolling -->

<!-- skills -->
<script src="js/pie-chart.js" type="text/javascript"></script>
 <script type="text/javascript">

        $(document).ready(function () {
            $('#demo-pie-1').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-2').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'butt',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-3').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
			
			$('#demo-pie-4').pieChart({
                barColor: '#10A7AF',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
        });
    </script>
<!-- skills -->
<script type="text/javascript" src="js/numscroller-1.0.js"></script>
</head>
<body>
<!-- banner -->
<div class="header-top">
	<div class="container">
		<ul>
			<li><a class="scroll" href="#about"><span class="glyphicon glyphicon-file" aria-hidden="true"></span>简历</a></li>
			<li><a class="scroll" href="#emailme"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>联系我</a></li>
			<li><a href="javascript:window.print()"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>打印</a></li>
			<li><a href="#portfolioModal9" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal">
				<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>我的头像</a></li>
		</ul>
	</div>
</div>	
<div class="header">
	<div class="container">
		<div class="col-md-8 header-left">
			<div class="col-sm-5 pro-pic">
				<img class="img-responsive" src="images/pic1.jpg" alt=" "/>
			</div>
			<div class="col-sm-5 pro-text">
				<h1>王梓轩</h1>
				<p>前端工程师</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="col-md-4 header-right ">
			<ul class="list-left">
				<li>Email:</li>
				<li>网站:</li>
				<li>电话:</li>
				<li>地址: </li>
			</ul>
			<ul class="list-right">
				<li><a href="mailto:info@qq.com">1098958975@qq.com</a></li>
				<li><a href="www.cnwangzixuan.com">www.cnwangzixuan.com</a></li>
				<li>15636176275</li>
				<li>中国 黑龙江 哈尔滨 黑龙江大学</li>
			</ul>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //banner -->
<!-- about -->
<div id="about" class="about">
	<div class="container">
		<h3 class="tittle">关于我</h3>
		<p>简介</p>
	</div>
	<div class="col-md-6 abt-left ">
		<h2>前端技能</h2>
				<div class="accordion">
							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-1">
									<span>1、</span> 熟练 HTML/CSS
								<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-1" class="accordion-section-content">
									<h6>熟练情况</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">能够编写语义化的HTML</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">模块化的 CSS </a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">完成较复杂的布局</a></li>
									</ul>
								</div>
							</div>

							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-2">
									<span>2、</span> 熟练原生JavaScript
									<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-2" class="accordion-section-content">
									<h6>熟练情况</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">会写与原生网页</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">会封装原生模块</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">熟悉原理</a></li>
									</ul>
								</div>
							</div>

							<div class="accordion-section">
								<h5><a class="accordion-section-title" href="#accordion-3">
									<span>3、</span> 熟练使用框架
									<i class="glyphicon glyphicon-chevron-down"></i><div class="clearfix"></div>
								</a></h5>
								<div id="accordion-3" class="accordion-section-content">
									<h6>熟练情况</h6>
									<ul>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">熟练使用jQuery</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">熟练使用Vue</a></li>
										<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span><a href="#">熟练使用React</a></li>
									</ul>
								</div>
							</div>


				</div>
				<script>
							jQuery(document).ready(function() {
								function close_accordion_section() {
									jQuery('.accordion .accordion-section-title').removeClass('active');
									jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
								}

								jQuery('.accordion-section-title').click(function(e) {
									// Grab current anchor value
									var currentAttrValue = jQuery(this).attr('href');

									if(jQuery(e.target).is('.active')) {
										close_accordion_section();
									}else {
										close_accordion_section();

										// Add active class to section title
										jQuery(this).addClass('active');
										// Open up the hidden content panel
										jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
									}

									e.preventDefault();
								});
							});
				</script>
	</div>
	<div class="col-md-6 abt-right ">
		<div class="">
			<img src="" alt="">66
		</div>
		<h3>标题</h3>
		<p>文章</p>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
</div>
<!-- about -->
<!-- education -->
<div class="employment">
	<div class="container">
		<h3 class="tittle ">项目经验</h3>
		<div class="col-md-6 employ-left">
			<h4>01</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>网站制作</h5>
			<p>模仿豆瓣的网站制作</p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>游戏制作<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>H5贪吃蛇小游戏</p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>02</h4>
		</div>
		<div class="col-md-6 employ-left ">
			<h4>03</h4>
		</div>
		<div class="col-md-6 employ-right">
			<h5><span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>Linux</h5>
			<p>linux配置路由器</p>
		</div>
		<div class="col-md-6 employ-left2">
			<h5>Photoshop<span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span></h5>
			<p>网站制作中的切图</p>
		</div>
		<div class="col-md-6 employ-right2">
			<h4>04</h4>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //num scroller -->
<!-- portfolio -->
<div class="portfolio">
	<div class="container">
		<h3 class="tittle ">项目展示</h3>
			<div class="portfolio-grids">
				<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
				<script type="text/javascript">
									$(document).ready(function () {
										$('#horizontalTab').easyResponsiveTabs({
											type: 'default', //Types: default, vertical, accordion           
											width: 'auto', //auto or any width like 600px
											fit: true   // 100% fit in a container
										});
									});
									
				</script>
				<div class="sap_tabs">
					<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
						<ul class="resp-tabs-list">
							<li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>所有项目</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>游戏</span></li>
							<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>网站</span></li>
						</ul>				  	 
						<div class="resp-tabs-container">
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal1" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic4.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal3" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic5.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd yes_marg ">
									<div class="thumb">
										<a href="#portfolioModal8" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic14.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd  ">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal7" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic13.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal2" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic9.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd ">
									<div class="thumb">
										<a href="#portfolioModal4" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic6.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal5" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic10.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="col-md-3 team-gd">
									<div class="thumb">
										<a href="#portfolioModal6" class="portfolio-link b-link-diagonal b-animate-go" data-toggle="modal"><img src="images/pic11.jpg" alt="">
										<div class="team_pos">
											<ul>
												<li>
													<div class="morph pic fb_icon1">
													</div>
												</li>
											</ul>
										</div>
										</a>
									</div>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
	</div>
</div>
<!-- //portfolio -->
<!-- more skills -->
<div class="more">
	<div class="container">
		<h3 class="tittle ">技能</h3>
		<div class="col-md-6 skill-left ">
			<div class="progress">
				  <div class="progress-bar progress-bar-success" style="width: 30%">网站开发
					<span class="sr-only">35%</span>
				  </div>
				  <div class="progress-bar progress-bar-warning " style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success1" style="width: 30%">JAVA SCRIPT
					<span class="sr-only">35%</span>
				  </div>
				  <div class="progress-bar progress-bar-warning1" style="width: 20%">
					<span class="sr-only"></span>
				  </div>
				  <p>50%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success3" style="width: 30%">CSS
					<span class="sr-only">35%</span>
				  </div>
				  <div class="progress-bar progress-bar-warning3 " style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			<div class="progress">
				  <div class="progress-bar progress-bar-success2" style="width: 30%">HTML
					<span class="sr-only">35%</span>
				  </div>
				  <div class="progress-bar progress-bar-warning2" style="width: 55%">
					<span class="sr-only"></span>
				  </div>
				  <p>85%</p>
				  <div class="clearfix"></div>
			</div>
			
			<div class="progress no-marg">
				  <div class="progress-bar progress-bar-success4" style="width: 30%">photoshop
					<span class="sr-only">35%</span>
				  </div>
				  <div class="progress-bar progress-bar-warning4" style="width: 40%">
					<span class="sr-only"></span>
				  </div>
				  <p>70%</p>
				  <div class="clearfix"></div>
			</div>
		</div>
		<div class="col-md-6 skill-right ">
			<div class="scrollbar scrollbar1">
				<div class="more-gds">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>前端框架掌握情况</h4>
						<p>会多种框架</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
						<h4>算法编程水平</h4>
						<p>算法很厉害</p>
					</div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
					</div>
					<div class="col-sm-9 more-right">
						<h4>photoshop使用</h4>
						<p>熟练使用</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="more-gds yes_marg">
					<div class="col-sm-9 more-right2">
						<h4>兴趣爱好</h4>
						<p>爱好广泛</p>
					</div>
					<div class="col-sm-3 more-left">
						<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- more skills -->
<!-- contact -->
<div id="emailme" class="contact">
	<div class="container">
		<h3 class="tittle">联系我</h3>
		<div class="col-md-6 contact-left ">
			<div class="horizontal-tab">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#tab1" data-toggle="tab" aria-expanded="false">联系方式</a></li>
					<li class=""><a href="#tab2" data-toggle="tab" aria-expanded="false">录用我</a></li>
				</ul>
				<div class="tab-content">
					<div class="tab-pane active in" id="tab1">
						<div class="contact-form">
							<ul>
								<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>哈尔滨市南岗区学府路74号黑龙江大学1号楼</li>
								<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:info@example.com">1098958975@qq.com</a></li>
								<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>15636176275</li>
							</ul>
							<form>
								<input type="text" value="姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '姓名';}" required="">
								<input type="email" value="邮箱" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '邮箱';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">留言...</textarea>
								<input type="submit" value="提交" >
							</form>
						</div>
					 
					</div>
					<div class="tab-pane" id="tab2">
					  <div class="contact-form">
							<form>
								<input type="text" value="姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '姓名';}" required="">
								<input type="email" value="邮箱" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '邮箱';}" required="">
								<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '公司信息...';}" required="">公司信息...</textarea>
								<input id="uploadFile" placeholder="" disabled="disabled" />
									<div class="fileUpload btn btn-primary">
										<span>上传文件</span>
										<input id="uploadBtn" type="file" class="upload" />
									</div>
								<input type="submit" value="提交" >
							</form>
							<script>
								document.getElementById("uploadBtn").onchange = function () {
									document.getElementById("uploadFile").value = this.value;
								};
							</script>
						</div>
					</div>
					
				</div>
            </div>
		</div>
		<div class="col-md-6 contact-right ">
			<iframe src="baidumap.html" height=676 width=736 frameborder="0" style="border:0"></iframe>
		</div>
		<div class="clearfix"></div>
		<p class="copy-right">&copy 2017 Resume. All rights reserved | Design by wangzixuan</p>
		<p class="copy-right">湘ICP备17016992号</p>
	</div>
</div>
<!-- //contact -->
<!-- for bootstrap working -->
	<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<div class="portfolio-modal modal fade slideanim" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>Image-Title</h3>
                        <img src="images/pic4.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目1</h3>
                        <img src="images/pic9.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目2</h3>
                        <img src="images/pic5.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目3</h3>
                        <img src="images/pic6.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目4</h3>
                        <img src="images/pic10.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目5</h3>
                        <img src="images/pic11.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal7" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目6</h3>
                        <img src="images/pic13.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal8" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
						<h3>项目7</h3>
                        <img src="images/pic14.jpg" class="img-responsive img-centered" alt="">
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="portfolio-modal modal fade slideanim" id="portfolioModal9" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content port-modal">
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl"></div>
            </div>
        </div>
        <div class="container">
			<div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <div class="modal-body">
                        <img src="images/pic1.jpg" class="img-responsive img-centered" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
	<!--scrolling js-->
	<script src="js/jquery.nicescroll.js"></script>
	<script src="js/scripts.js"></script>
	<!--//scrolling js-->
	<!-- smooth scrolling -->
	<script type="text/javascript">
		$(document).ready(function() {
		/*
			var defaults = {
			containerID: 'toTop', // fading element id
			containerHoverID: 'toTopHover', // fading element hover id
			scrollSpeed: 1200,
			easingType: 'linear' 
			};
		*/								
		$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->

</body>
</html>
